<template>
  <a-select v-model:value="name" show-search allowClear
            :filterOption="filterNameOption"
            @change="onChange" placeholder="请选择车站"
            :style="'width: ' + localWidth">
    <a-select-option v-for="item in stations" :key="item.name" :value="item.name"
                     :label="item.name + item.namePinyin + item.namePy">
      {{ item.name }} | {{ item.namePinyin }} ~ {{ item.namePy }}
    </a-select-option>
  </a-select>
</template>


<script>
import {defineComponent, onMounted, ref, watch} from "vue";
import axios from "axios";
import {notification} from "ant-design-vue";

export default defineComponent({
  // 组件名
  name: "station-select-view",
  // props区域用于定义父子组件参数传递的属性
  // 在此处，将车站编号通过modelValue传递到子组件，在子组件中，通过watch为组件内的响应式变量name赋值，从而让下拉框选择某一已经被选择的车站
  // 父组件中，为标签(组件)的v-model属性赋值，就可以将值传递到modelValue中了
  props: ["modelValue", "width"],
  // emit：触发事件
  emits: ['update:modelValue', 'change'],
  setup(props, {emit}) {
    const name = ref();
    const stations = ref();
    const localWidth = ref(props.width);
    if (Tool.isEmpty(props.width)) {
      localWidth.value = "100%";
    }

    // 利用watch，动态获取父组件的值，如果放在onMounted或其它方法里，则只有第一次有效
    watch(() => props.modelValue, () => {
      console.log("props.modelValue", props.modelValue);
      name.value = props.modelValue;
    }, {immediate: true});

    /**
     * 查询所有的车站，用于车站下拉框
     */
    const queryStationName = () => {
      axios.get("/train-business/admin/station/query-all").then(response => {
        let data = response.data;
        if (data.success) {
          stations.value = data.content;
        } else {
          notification.error({description: data.message})
        }
      });
    }

    /**
     * 车站下拉框筛选
     */
    const filterNameOption = (input, option) => {
      console.log(input, option);
      // 官方示例是按value来过滤，这里是按多个字段来搜，即车站、起始站等，所以扩展处了label属性
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };

    /**
     * 将当前组件的值响应给父组件
     */
    const onChange = (value) => {
      // emit用于触发事件，这里用于更新modelValue，将当前组件选择的值传递给父组件
      emit('update:modelValue', value);
      // ----------start：自定义事件change，功能扩展，可以将子组件的事件暴露给父组件来使用----------
      // 作用：有时候，父组件只知道子组件选择的车站编号还不够，还要知道这个车站编号对应的整个station的信息，包括始发站、终点站等，此时就可以通过change事件来拿到
      let station = stations.value.filter(item => item.code === value)[0];
      if (Tool.isEmpty(station)) {
        station = {};
      }
      emit('change', station);
      // ----------end：自定义事件change，功能扩展，可以将子组件的事件暴露给父组件来使用----------
    }

    onMounted(() => {
      queryStationName();
    })

    return {
      name,
      stations,
      filterNameOption,
      onChange,
      localWidth,
    };
  }
})


</script>